<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 表格数据加载状态
const tableLoading = ref(false);

// 会员列表数据
const memberList = ref([]);

// 搜索表单
const searchForm = reactive({
  keyword: '',
  memberLevel: '',
  status: ''
});

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// 会员等级选项
const memberLevelOptions = [
  { label: '普通会员', value: 'normal' },
  { label: '银卡会员', value: 'silver' },
  { label: '金卡会员', value: 'gold' },
  { label: '钻石会员', value: 'diamond' }
];

// 状态选项
const statusOptions = [
  { label: '正常', value: 'active' },
  { label: '已冻结', value: 'frozen' },
  { label: '已禁用', value: 'disabled' }
];

// 加载会员数据
const loadMemberData = () => {
  tableLoading.value = true;
  
  // 模拟API请求
  setTimeout(() => {
    // 生成模拟数据
    memberList.value = Array.from({ length: 20 }, (_, index) => {
      const id = index + 1;
      const levelIndex = Math.floor(Math.random() * 4);
      const statusIndex = Math.floor(Math.random() * 3);
      
      return {
        id,
        name: `会员${id}`,
        phone: `1381234${id.toString().padStart(4, '0')}`,
        level: memberLevelOptions[levelIndex].value,
        levelName: memberLevelOptions[levelIndex].label,
        balance: Math.floor(Math.random() * 10000),
        points: Math.floor(Math.random() * 5000),
        status: statusOptions[statusIndex].value,
        statusName: statusOptions[statusIndex].label,
        registerTime: new Date(Date.now() - Math.floor(Math.random() * 60 * 24 * 60 * 60 * 1000)).toLocaleString()
      };
    });
    
    pagination.total = 128; // 模拟总数据量
    tableLoading.value = false;
  }, 1000);
};

// 处理页码变化
const handleCurrentChange = (page) => {
  pagination.currentPage = page;
  loadMemberData();
};

// 处理每页条数变化
const handleSizeChange = (size) => {
  pagination.pageSize = size;
  pagination.currentPage = 1;
  loadMemberData();
};

// 处理查询
const handleSearch = () => {
  pagination.currentPage = 1;
  loadMemberData();
};

// 重置查询条件
const resetSearch = () => {
  // 重置查询表单
  searchForm.keyword = '';
  searchForm.memberLevel = '';
  searchForm.status = '';
  
  // 重新加载数据
  pagination.currentPage = 1;
  loadMemberData();
};

// 查看会员详情
const viewMemberDetails = (row) => {
  ElMessage.info(`查看会员详情：${row.name}`);
};

// 编辑会员
const editMember = (row) => {
  ElMessage.info(`编辑会员：${row.name}`);
};

// 删除会员
const deleteMember = (row) => {
  ElMessageBox.confirm(`确定要删除会员"${row.name}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功');
    loadMemberData();
  }).catch(() => {});
};

// 冻结/解冻会员
const toggleMemberStatus = (row) => {
  const action = row.status === 'active' ? '冻结' : '解冻';
  
  ElMessageBox.confirm(`确定要${action}会员"${row.name}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success(`${action}成功`);
    row.status = row.status === 'active' ? 'frozen' : 'active';
    row.statusName = row.status === 'active' ? '正常' : '已冻结';
  }).catch(() => {});
};

// 初始化加载
onMounted(() => {
  loadMemberData();
});
</script>

<template>
  <div class="member-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>会员管理</h2>
    </div>
    
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form :model="searchForm" inline>
        <el-form-item label="关键词">
          <el-input 
            v-model="searchForm.keyword" 
            placeholder="会员姓名/手机号"
            clearable
          />
        </el-form-item>
        <el-form-item label="会员等级">
          <el-select v-model="searchForm.memberLevel" placeholder="请选择" clearable>
            <el-option 
              v-for="item in memberLevelOptions" 
              :key="item.value" 
              :label="item.label" 
              :value="item.value" 
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择" clearable>
            <el-option 
              v-for="item in statusOptions" 
              :key="item.value" 
              :label="item.label" 
              :value="item.value" 
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <!-- 表格区域 -->
    <el-card>
      <template #header>
        <div class="card-header">
          <span>会员列表</span>
          <el-button type="primary">
            <el-icon><Plus /></el-icon>
            新增会员
          </el-button>
        </div>
      </template>
      
      <el-table 
        :data="memberList" 
        v-loading="tableLoading" 
        border 
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="会员姓名" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="levelName" label="会员等级">
          <template #default="{ row }">
            <el-tag 
              :type="row.level === 'diamond' ? 'danger' : row.level === 'gold' ? 'warning' : row.level === 'silver' ? 'info' : ''"
            >
              {{ row.levelName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="balance" label="账户余额">
          <template #default="{ row }">
            {{ row.balance }} 元
          </template>
        </el-table-column>
        <el-table-column prop="points" label="积分" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag 
              :type="row.status === 'active' ? 'success' : row.status === 'frozen' ? 'warning' : 'danger'"
            >
              {{ row.statusName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="registerTime" label="注册时间" />
        <el-table-column label="操作" width="250">
          <template #default="{ row }">
            <el-button 
              size="small" 
              @click="viewMemberDetails(row)"
            >
              详情
            </el-button>
            <el-button 
              size="small" 
              type="primary" 
              @click="editMember(row)"
            >
              编辑
            </el-button>
            <el-button 
              size="small" 
              :type="row.status === 'active' ? 'warning' : 'success'" 
              @click="toggleMemberStatus(row)"
            >
              {{ row.status === 'active' ? '冻结' : '解冻' }}
            </el-button>
            <el-button 
              size="small" 
              type="danger" 
              @click="deleteMember(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.member-container {
  padding: 20px;
}
.page-header {
  margin-bottom: 20px;
}
.search-card {
  margin-bottom: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 
